<template>
  <div class="header">
    <div>
      <span class="title">旅游后台管理</span>
    </div>
    <div class="usercon">
      <!-- // 用户信息 -->
      <el-dropdown trigger="hover" @command="command">
        <div class="userinfo">
          <img class="avatar" :src="this.form.user_head_img ? imgUrl+this.form.user_head_img : require('assets/images/person.png')" alt="">
          <div class="info">
            <p>
              <span class="username">
                {{form.user_name}}<i class="iconfont icon-arrow3"></i>
              </span>
            </p>
          </div>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">修改资料</el-dropdown-item>
          <el-dropdown-item command="b">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- // 修改资料 -->
    <el-dialog title="修改资料" :visible.sync="dialogFormVisible" >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="用户名" label-width="120px">
          <el-input placeholder="请输入" :disabled="true" v-model="form.user_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" label-width="120px">
          <upimg :imgs.sync="imgs" :ismultiple="false"/>
        </el-form-item>
        <el-form-item label="账号"  label-width="120px" >
          <el-input placeholder="请输入" :disabled="true" v-model="form.mobilenum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" prop="password">
          <el-input placeholder="请输入" type="password" v-model="form.password" show-password autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码"  label-width="120px" prop="password2">
          <el-input placeholder="请输入" type="password" v-model="form.password2" show-password autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import upimg from 'components/upimg/upimg'
import config from 'api/config'
import {addOrEditAdm} from 'api/administratorManagement'
export default {
  components: {
    upimg
  },
  data(){
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      imgUrl: config.imgUrl,
      dialogFormVisible: false,
      form: {},
      imgs: [],
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    command(type){
      if(type === 'a'){
        this.dialogFormVisible = true
      }else if(type === 'b'){
        this.logout()
      }
    },
    logout(){
      localStorage.clear()
      window.location.reload()
    },
    doAction(){
      this.$refs['form'].validate().then(() => {
        let sendData = this.form
        if(this.imgs[0]){
          sendData.user_head_img = this.imgs[0]
        }else{
          sendData.user_head_img = ''
        }
        addOrEditAdm(sendData).then(res => {
          if(res){
            this.$message({
              message: '修改成功, 请重新登陆',
              type: 'success'
            })
            this.logout()
          }
        })

      })
    }
  },
  created(){
    this.form = JSON.parse(localStorage.getItem('userData'))
    this.imgs = [this.form.user_head_img]
  }
}
</script>


<style lang="scss" scoped>
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 34px;
}
.title{
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 600;
}
.usercon {
  height: 100%;
  display: flex;
  align-items: center;
}
.userinfo {
  display: flex;
  .avatar {
    height: 40px;
    width: 40px;
    margin-right: 5px;
    border-radius: 50%;
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .username {
      font-size: 16px;
      color: #fff;
      display: flex;
      img {
        width: 12px;
        height: 12px;
        margin-top: 2px;
      }
    }
    p:nth-child(2) {
      margin-top: 5px;
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
